<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">

      <category-icons />

      <div v-if="!errorShow && !loadingShow">
        <home-title :title="homeTitle.viewTitle" />
        <view-list :viewDatas="homeDatas.viewDatas" />
        <home-title :title="homeTitle.foodTitle" />
        <food-list :foodDatas="homeDatas.foodDatas"></food-list>
        <home-title :title="homeTitle.hotelTitle" />
        <hotel-list :hotelDatas="homeDatas.hotelDatas" />
        <home-title :title="homeTitle.massageTitle" />
        <massage-list :massageDatas="homeDatas.massageDatas" />
        <home-title :title="homeTitle.ktvTitle" />
        <ktv-list :ktvDatas="homeDatas.ktvDatas" />
      </div>

      <loading :loadingShow="loadingShow"/>
      <error :errorShow="errorShow" />
    </div>
  </div>
</template>

<script>
/**
 * BetterScroll这个滚动插件得固定写法
 * 1、样式一定要如下这么写，一定要有两层结构包裹住，里面才是我们写得滚动区域得东西
 * <div class="scroll-wrapper" ref="wrapper">
 *    <div class="scroll-content">
 *       这里才是我们开发者写东西得区域
 *    </div>
 * </div>
 * 
 * 2、引入BetterScroll插件，import BetterScroll from 'better-scroll';
 * 3、一定要在所有DOM都挂载完成之后，才可以挂载BetterScroll插件，如vue中要在mounted(){}函数内部挂载，这样才可以初始化好
*/
import BetterScroll from 'better-scroll';
import CategoryIcons from "./CategoryIcons";
import HomeTitle from "./Sub/HomeTitle";
import ViewList from "./ViewList";
import FoodList from './FoodList';
import HotelList from './HotelList';
import MassageList from './MassageList';
import KtvList from './KtvList';
import Loading from "./Sub/Loading";
import Error from './Sub/Error';

import { mapState } from "vuex";
import { IndexModel } from "models/index";

import tools from '../../utils/tools';

export default {
  name: "HomeScrollWrapper",
  components: {
    CategoryIcons,
    HomeTitle,
    ViewList,
    FoodList,
    HotelList,
    MassageList,
    KtvList,
    Loading,
    Error
  },
  data() {
    return {
      currentCityId: 0,
      loadingShow: true,
      errorShow: false,
      homeTitle: {
        foodTitle: '推荐美食',
        hotelTitle: '推荐酒店',
        ktvTitle: '推荐KTV',
        massageTitle: '推荐按摩',
        viewTitle: '推荐景点'
      },
      homeDatas: {
        foodDatas: [],
        hotelDatas: [],
        ktvDatas: [],
        massageDatas: [],
        viewDatas: []
      }
    }
  },
  computed: {
    ...mapState(['cityId'])
  },
  
  mounted() {
    this.scroll = new BetterScroll(this.$refs.wrapper, {
      mouseWheel: true,
      // preventDefault: false,
      click: true,
      tap: true
    });
    this.currentCityId = this.cityId;
    this.getHomeDatas(this.cityId);

  },

  activated () {
    if (this.currentCityId !== this.cityId) {
      this.currentCityId = this.cityId;
      this.getHomeDatas(this.currentCityId);
    }
  },

  methods: {
    getHomeDatas (cityId) {
      // console.log(process.env.NODE_ENV);
      const indexModel = new IndexModel();
     
      indexModel.getHomeDatas(cityId).then(res => {
          if(res && res.status === 0) {
            const data = res.data;

            this.loadingShow = false;
            this.errorShow = false;
            this.homeDatas.foodDatas = tools.formatJSON(data.foodDatas, 'keyword');
            this.homeDatas.hotelDatas = data.hotelDatas;
            this.homeDatas.ktvDatas = data.ktvDatas;
            this.homeDatas.massageDatas = data.massageDatas;
            this.homeDatas.viewDatas = data.viewDatas;
          } else {
            this.loadingShow = false;
            this.errorShow = true;
            console.log({
              statusCode: res.status,
              errorMsg: res.error
            })
          }
          
      })
    }
  }
};
</script>

<style lang="scss" scoped>
</style>